<script setup lang="ts">
import ToolView from "@/modules/tools/layout/tool-view.vue";
import type { Group, Scope } from "./types.ts";
import { computed, ref } from "vue";
import { computeChmodOctalRepresentation, computeChmodSymbolicRepresentation } from "./utils.ts";
import { hc } from "@/framework/vue/util/render.ts";
import { CopyOutlined } from "@ant-design/icons-vue";

import { copyText } from "@/util/clipboard.ts";
import InputCopyable from "@/components/framework/input-copyable.vue";

const scopes: { scope: Scope; title: string }[] = [
  { scope: "read", title: "Read (4)" },
  { scope: "write", title: "Write (2)" },
  { scope: "execute", title: "Execute (1)" },
];
const groups: Group[] = ["owner", "group", "public"];

const permissions = ref({
  owner: { read: false, write: false, execute: false },
  group: { read: false, write: false, execute: false },
  public: { read: false, write: false, execute: false },
});

const octal = computed(() => computeChmodOctalRepresentation({ permissions: permissions.value }));
const symbolic = computed(() => computeChmodSymbolicRepresentation({ permissions: permissions.value }));
</script>

<template>
  <tool-view title="Chmod计算器" description="使用此计算器计算chmod权限和命令。">
    <div class="full-view p-10 flex-center">
      <div class="flex-column aic">
        <table class="simple-table table-centered cell-checkbox permission-table">
          <thead>
            <tr>
              <th></th>
              <th>Owner (u)</th>
              <th>Group (g)</th>
              <th>Public (o)</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="{ scope, title } of scopes" :key="scope">
              <td>{{ title }}</td>
              <td v-for="group of groups" :key="group">
                <a-checkbox v-model:checked="permissions[group][scope]" />
              </td>
            </tr>
          </tbody>
        </table>

        <div class="mt-30 font-50 color-success">{{ octal }}</div>
        <div class="mt-30 font-50 color-success">{{ symbolic }}</div>

        <div class="flex col-gap-10 w-500 mt-30">
          <input-copyable :value="`chmod ${octal}`" readonly class="flex-1" />
        </div>
      </div>
    </div>
  </tool-view>
</template>

<style scoped lang="less">
.permission-table {
  width: 500px;

  th,
  td {
    height: 50px;
  }
}
</style>
